<template>
	<view class="wrapper">
		<!-- 个人资料 -->
		<view>
			<view class="top">
				<view class="center">
					<view class="center_top">
						<view class="center_img" @tap="gotoFeeds()">
							<image :src="userInfo.avatarUrl"></image>
						</view>
						<view class="center_info" @tap="gotoFeeds()">
							<view class="center_name">
								<view>{{userInfo.nickName}}</view>
							</view>
							<view class="center_vip">
								<image class="rank_icon" src="../../static/images/other/huiyuan.png" />
								<view class="vip_text">
									<text>普通会员</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<image src='../../static/images/tabbar/water.gif' mode='scaleToFill' class='gif-wave'></image>
			</view>
		</view>


		<!-- 统计 -->
		<view class="count">
			<view class="cell" @tap="gotoPath('../../subpkg/balance/balance')"> ￥{{userInfo.balance/100||0}} <text style="color: #AAAAAA;">我的余额</text> </view>
			<view class="cell"> ￥{{userInfo.blockBalance/100||0}} <text style="color: #AAAAAA;">冻结余额</text> </view>
			<view class="cell" @tap="gotoPath('../../subpkg/producttimes/producttimes')"> {{userInfo.productTimes||0}} <text style="color: #AAAAAA;">制作次数</text> </view>
			<view class="cell"> {{userInfo.invitePeopleNum||0}} <text style="color: #AAAAAA;">邀请人数</text> </view>
		</view>
		<!-- 其它 -->
		<view class="extra">
			<button open-type="contact" class="item icon-arrow">联系客服</button>
			<button open-type="feedback" class="item icon-arrow">意见反馈</button>
			<navigator url="../../subpkg/aboutwe/aboutwe" class="item icon-arrow">关于我们</navigator>
		</view>
		<view class="log-out-btn" @click="logout">
			<text class="cell-tit">退出登录</text>
		</view>
		
		<view class="vedioad" style="margin-top: 20rpx;">
			<ad unit-id="adunit-0cea067c38b820a9" ad-type="video" ad-theme="white"></ad>
		</view>
	</view>
</template>

<script>
	// 引入vuex
	import { mapState, mapMutations } from 'vuex'
	import {http} from '../../utils/http.js'
	export default {
		data() {
			return {
				
			}
		},
		onShow() {
			let _this=this
			// console.log(_this.token)
			// this.userInfo==''||this.userInfo==null||this.userInfo==undefined||this.userInfo=={}
			if(true){
				// 获取用户信息
				http({
					url:'/wx/auth/userInfo',
					method:"GET",
					header:{
						Authorization:_this.token.data
					}
				}).then(res=>{
					if(res.code==200){
						this.updateUserInfo(res.data)
					}
				})
			}
		},
		onPullDownRefresh() {
			// 获取用户信息
			http({
				url:'/wx/auth/userInfo',
				method:"GET",
				header:{
					Authorization:this.token.data
				}
			}).then(res=>{
				if(res.code==200){
					this.updateUserInfo(res.data)
				}
				uni.stopPullDownRefresh()
			})
			
		},
		computed:{
			...mapState('m_user',['userInfo','token'])
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
			// 退出登录
			async logout() {
			  // 询问用户是否退出登录
			  // console.log(this.userInfo)
			  // console.log(this.token)
			  const [err, succ] = await uni.showModal({
			    title: '提示',
			    content: '确认退出登录吗？'
			  }).catch(err => err)
			
			  if (succ && succ.confirm) {
			     // 用户确认了退出登录的操作
			     // 需要清空 vuex 中的 userinfo、token 和 address
			     this.updateUserInfo()
			     this.updateToken()
				 uni.redirectTo({
				 	url:'../../subpkg/login/login'
				 })
			  }
			},
			gotoFeeds(){
				uni.navigateTo({
					url:'../../subpkg/setting/setting'
				})
			},
			gotoPath(path){
				uni.navigateTo({
					url:path
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	Page {
		font-size: 14px;
	}

	.top {
		width: 100%;
		height: 130px;
		background: #3ea2ff;
		padding-top: 15px;
		position: relative;
	}

	.center {
		width: 95%;
		height: 100px;
		background: white;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		border-radius: 5px;
	}

	.center_top {
		display: flex;
		flex-direction: row;
		width: 80%;
		height: 80px;
		margin: 0 auto;
		margin-top: 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.center_img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		overflow: hidden;
	}

	.center_img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}


	.center_info {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-left: 30px;
	}

	.center_name {
		font-size: 20px;
	}

	.center_phone {
		color: #BEBEBE;
	}

	.center_rank {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.center_vip{
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		color: #999999;
	}

	.center_vip image {
		width: 25px;
		height: 25px;
	}


	.center_rank image {
		width: 35px;
		height: 35px;
	}

	.center_score {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.center_score image {
		width: 35px;
		height: 35px;
	}

	.gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	.wrapper {
		position: absolute;
		top: 0;
		bottom: 0;

		width: 100%;
		background-color: #F4F4F4;
	}

	.profile {
		height: 375rpx;
		background-color: #ea4451;
		display: flex;
		justify-content: center;
		align-items: center;

		.meta {
			.avatar {
				display: block;
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				overflow: hidden;
			}

			.nickname {
				display: block;
				text-align: center;
				margin-top: 20rpx;
				font-size: 30rpx;
				color: #fff;
			}
		}
	}

	.count {
		display: flex;
		margin: 0 20rpx;
		height: 120rpx;
		text-align: center;
		border-radius: 4rpx;
		background-color: #fff;

		position: relative;
		top: 10rpx;

		.cell {
			margin-top: 10rpx;
			flex: 1;
			padding-top: 20rpx;
			font-size: 27rpx;
			color: #333;
		}

		text {
			display: block;
			font-size: 24rpx;
		}
	}

	.extra {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 4rpx;

		.item {
			line-height: 1;
			padding: 25rpx 0 25rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 30rpx;
			color: #333;
		}

		button {
			text-align: left;
			background-color: #fff;

			&::after {
				border: none;
				border-radius: 0;
			}
		}
	}

	.icon-arrow {
		position: relative;

		&::before {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}

	.log-out-btn {
		margin-top: 40upx;
		background-color: #FFFFFF;
		padding:15px 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.cell-tit {
			color: #3ea2ff;
		}
	}
</style>
